<!--
 * @Description: 视频播放详情
 * @Author: 老五 13521685612@163.com
 * @Date: 2024-11-09 14:42:55
 * @LastEditors: 老五 13521685612@163.com
 * @LastEditTime: 2024-12-07 23:15:53
 * @FilePath: /lieshou-app/pages/video_details.vue
-->

<template>
	<view class="video-page">
		<z-paging ref="paging">
			<view slot="top">
				<zNav :title="title" :showBack="true"></zNav>
				<view class="video-box">
					<!-- initial-time="10" duration="50" -->
					<video id="myVideo" ref="videoRef" @timeupdate="getDuration" :poster="material.cover" autoplay
						:danmu-btn="false" style="width: 100%;height: 422rpx;" :src="material.url"
						@error="videoErrorCallback" enable-danmu controls></video>
				</view>
				<view class="video-title">{{videoTitle}}</view>
				<scroll-view class="scroll-box" scroll-x>
					<view style="width: 100%;display: inline-block;">
						<view class="video-desc-box" v-for="(item,index) in upTimeIns.contents" :key="index"
							@click="getCurrentItem(item,index)"
							:style="currentIndex===index?'color: rgba(255, 255, 255, 1);background: rgba(34, 37, 70, 1);':''">
							<view class="video-row-box">
								<view class="video-row-box-title">{{index+1}}.{{index+1}}{{item.title}}</view>
								<view class="video-row-box-title">课程时长:{{((item.material.duration) / 60).toFixed(0)}}分钟
									已学({{((item.learn_time) / 60).toFixed(0)}}分钟)</view>
							</view>
							<view class="video-row-box-right" v-if="currentIndex===index">
								<image class="video-icon" src="@/static/image/icon/play-icon.png"></image>
								<view>学习</view>
							</view>
						</view>
					</view>

				</scroll-view>
				<view class="gap"></view>
				<view style="margin: 20rpx 0;">
					<!-- <zHeadLab title="课程目录"></zHeadLab> -->
					<zLabel :labelList='labelList' :labelId="labelId" @getTab="getTab"></zLabel>
				</view>
			</view>

			<!-- 列表 -->
			<!-- 	<view class="list-sort-box">
			<view class="list-sort-box-title">一、课程介绍</view>
			<view class="list-sort-box-status">正在学习</view>
			<view class="list-sort-box-press">完成度：1%</view>
		</view> -->
			<view>
				<zCatalogueList type='list' :has_rights="query.has_rights" :isMember="true" :list="courseList"
					:current="current" @getItem="getItem">
				</zCatalogueList>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import zCatalogueList from '@/components/z-catalogue-list.vue';
	import zLabel from '@/components/z-label.vue';
	import zNav from '@/components/z-nav.vue';
	export default {
		components: {
			zCatalogueList,
			zLabel,
			zNav
		},
		data() {
			return {
				upTimeIns: {},
				labelId:0,
				labelList:[{
					name:'课程目录'
				},{
					name:'课后作业'
				},{
					name:'作业奖励'
				},],
				videoTitle: "一、课程介绍",
				// 视频信息
				material: {},
				title: '课程详情',
				// 页面传参
				query: {},
				// 默认选中横项第一个
				currentIndex: 0,
				// 默认选中目录第一个
				current: 0,
				// 列表
				courseList: [],
				list: [{
					name: '1.1  社交脱单的核心理念',
					title: '课程时长：9分钟（已学6分钟）',
					tag: '学习'
				}, {
					name: '1.1  社交脱单的核心理念',
					title: '课程时长：9分钟（已学6分钟）',
					tag: '学习'
				}, {
					name: '1.1  社交脱单的核心理念',
					title: '课程时长：9分钟（已学6分钟）',
					tag: '学习'
				}, {
					name: '1.1  社交脱单的核心理念',
					title: '课程时长：9分钟（已学6分钟）',
					tag: '学习'
				}]
			};
		},
		onLoad(query) {
			if (query) {
				this.$utils.showLog('视频学习==获取课程目录', query)
				this.query = query
				this.title = query.name
				this.queryList(1, 10)
			}
			// #ifdef MP-WEIXIN
			this.$utils.showShare(
				"分享免费学习的平台给你~",
				'/pages/service_center',
				"https://img.js.design/assets/img/66a939f9cb8cbd1e8622a19c.jpg"
			);
			// #endif
		},
		methods: {
			getDuration(e) {
				// 5分钟执行一次上报
				uni.$uv.throttle(() => {
					// this.$utils.showLog('getDuration==e', this.upTimeIns)
					this.$apis.getCoursesLearn({
						contents_id: this.upTimeIns.contents_id,
						courses_id: this.upTimeIns.courses_id,
						material_id: this.upTimeIns.material_id,
						learn_time: parseInt(e.detail.currentTime)
					}).then((res) => {
						this.$utils.showLog('sahng111==', res)

					}).catch(() => {

					})
				}, 5000)
			},
			getpay(e) {
				// this.$utils.showLog('getpay==e', e)		
			},
			getpause(e) {
				// this.$utils.showLog('getpause==e', e)	
			},
			// 初始化加载数据
			queryList(pageNo, pageSize) {
				// 这里的请求只是演示，请替换成自己的项目的网络请求
				this.$apis.getCoursesContent({
					page: pageNo,
					size: pageSize,
					courses_id: parseInt(this.query.id)
				}).then((res) => {
					console.log('res', res.contents[0])
					// 默认素材第一条
					if (res.contents) {
						this.courseList = res.contents
						this.initData({
							id: res.contents[0].id,
							contents: res.contents[0].contents,
							courses_id: parseInt(res.contents[0].courses_id)
						}, 'page')
						console.log('res', this.courseList)
					}
				}).catch(() => {

				})
			},
			initData(data, type) {
				this.material = ""
				// this.$refs.videoRef.src = '';
				this.$apis.getMaterial({
					contents_id: data.id,
					courses_id: data.courses_id
				}).then((res) => {


					this.material = res.material
					this.$nextTick(()=>{
						const context = uni.createVideoContext('myVideo', this);
						context.play();
					})
					
					// this.$forceUpdate()
					if (type === 'child') {

					} else {
						console.error('===')
						this.upTimeIns = {
							contents_id: data.id,
							courses_id: data.courses_id,
							material_id: res.material.id,
							contents: data.contents
						}
					}
					this.$forceUpdate()
					this.$utils.showLog('获取课程目录111==', res.material)

				}).catch(() => {

				})

			},
			getCurrentItem(item, index) {
				this.currentIndex = index
				console.log('000', item)
				let params = {
					id: item.id,
					courses_id: item.courses_id,
					material_id: item.material.id,
					contents: item.contents
				}
				this.initData(params, 'child')
				this.material = item.material
				this.$forceUpdate()
			},
			getItem(e) {
				this.currentIndex = 0
				console.log('=======', e)
				let params = {
					// id: e.item.id,
					id: e.item.contents[0].id,
					courses_id: e.item.courses_id,
					material_id: e.item.material.id,
					contents: e.item.contents
				}
				// 截流
				this.current = e.index;
				this.initData(params, 'page')

			}
		}
	}
</script>

<style lang="scss">
	page {

		background-image: url('https://1257557568.vod-qcloud.com/d34b21d5vodcq1257557568/7b1391ad1397757896686948962/ERawiiRPGZkA.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.video-page {
		width: 100%;
		height: 100%;

		.video-box {
			width: 100%;
		}

		.video-title {
			font-size: 24rpx;
			margin-left: 16rpx;
			margin-top: 20rpx;
			font-weight: 400;
			letter-spacing: 0px;
			color: rgba(0, 0, 0, 1);
		}



		.scroll-box {
			white-space: nowrap;
			width: 750rpx;
			margin-bottom: 18rpx;
			margin-top: 18rpx;

			.video-desc-box {
				width: 418rpx;
				margin-right: 14rpx;
				display: inline-block;
				opacity: 1;
				margin-left: 18rpx;
				padding: 20rpx 0;
				position: relative;
				color: rgba(34, 37, 70, 1);
				border-radius: 19rpx;
				background: rgba(255, 255, 255, 1);
				border: 2rpx solid rgba(34, 37, 70, 0.3);


				.video-row-box {
					margin: 20rpx 0 0 26rpx;

					.video-row-box-title {
						font-size: 24rpx;
						font-weight: 300;
						letter-spacing: 0px;
						text-align: left;
						white-space: nowrap;
						overflow: hidden;
						width: 300rpx;
						text-overflow: ellipsis;
						vertical-align: top;
						margin-bottom: 24rpx;
					}

					.video-row-box-title {
						font-size: 20rpx;
						font-weight: 300;
						text-align: left;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						vertical-align: top;
					}
				}

				.video-row-box-right {
					position: absolute;
					width: 100rpx;
					top: 22rpx;
					text-align: center;
					right: 6rpx;



					.video-icon {
						width: 56rpx;
						margin: 0 auto;
						height: 56rpx;
						object-fit: 100% 100%;
						padding-top: 10rpx;
						margin-bottom: 5rpx;
					}

					view {
						font-size: 28rpx;
						font-weight: 300;
						width: 100%;
						text-align: center;
						vertical-align: top;
					}
				}
			}
		}

		.list-sort-box {
			margin: 0 auto;
			width: 690rpx;
			height: 152rpx;
			opacity: 1;
			margin-bottom: 20rpx;
			position: relative;
			border-radius: 20rpx;
			background: rgba(255, 255, 255, 1);
			border: 4rpx solid rgba(252, 208, 231, 1);

			.list-sort-box-title {
				margin: 26rpx 0 0 30rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 1);
				text-align: left;
				vertical-align: top;
			}

			.list-sort-box-status {
				position: absolute;
				right: 40rpx;
				top: 39rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 1);
				text-align: left;
				vertical-align: top;
			}

			.list-sort-box-press {
				font-size: 24rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 1);
				text-align: left;
				margin-top: 20rpx;
				margin-left: 86rpx;
				vertical-align: top;
			}

		}

		.gap {
			width: 100%;
			height: 34rpx;
			opacity: 1;
			will-change: transform, filter;
			background: rgba(225, 243, 249, 1) !important;
			filter: blur(10px);
		}
	}
</style>